<template>
    <div class="index">
        <header class="index_header">
            <p>  </p>
            <p>预约挂号网</p>
            <!-- 跳转登陆信息 -->
            <p>
                <router-link to='Login'>
                    <img  class="index_log_to_Login" src="../../static/imgs/index_logo.png" height="78" width="82">
                </router-link>3
            </p>
    </header>
    <main>
        <nav>
            <section class="nav_tou">
                <img src="../../static/imgs/index_sou.png" >
                <input class="index_find" type="text" placeholder="请输入医院名称" v-focus>
            </section>
            <section class="index_di">
                <span class="index_di_left">医院排行榜</span>
                <span class="index_di_right">热度</span>
            </section>
        </nav>
        <!-- 跳转预约详情 -->
        <router-link :to="{name:'Register',params:{id:item.id}}" :key="item" tag="section" class="index_infos" v-for="item in list">
            <p class="index_infos_num">{{item.title}}</p>
            <dl>
                <dt>
                    <img src='../../static/imgs/index_01inf.png'>
                </dt>
                <dd class="index_dd_left">
                    <p class="index_name">{{item.name}}医院</p>
                    <p class="index_ji">{{item.zizhi}}</p>
                </dd>
                <dd class="index_dd_right">
                    <p class="index_rig_yi">已约<span>{{item.number}}人</span></p>
                    <p class="index_rig_qie"> <img src="../../static/imgs/index_acac.png"> </p>
                </dd>
            </dl>
        </router-link>



        
 
    </main>
    <footer>

    </footer>
    </div>
</template>
<script>
    export default {
        name:'index',
        directives:{
          focus : {
            inserted:function(el,binding){
                el.focus();
              }
          }
        },
        data () {
          return {
            list: []
          }
        },
        created () {
          this.$axios.get('/api/hlist').then(rep=>{
            this.list = rep.data.list;
          });
        }
    }
</script>
<style scoped lang='less'>
.PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
html,body{
  background:white;
}
.Flex{
    display:flex;
}


.index_header{
  position: fixed;
  width:100%;
  top: 0;
  .Flex;
  .PxToRem(height,279);
  padding:2% 2%;
  justify-content:space-between;
  background: url("../../static/imgs/index_banner.png");
  /*background-size: 100%;*/
  p{
    color:#ffffff;
    .PxToRem(font-size,35);

    .index_log_to_Login{
        .PxToRem(width,83);
        .PxToRem(height,83);
    }
  }
}
main{
  .PxToRem(padding-top,490);
}
nav{
  .nav_tou{
    width:100%;
    background:#ecf0f3;
    position: fixed;
    .PxToRem(top,279);
     padding:2% 2%;
    input{
      border: none;
      background:#ecf0f3;
      margin-left:33%;
    }
  }

  .index_di{
    width:96%;
    position: fixed;
    .PxToRem(top,360);
    color:#959595;
    background:#ffffff;
    padding:2%;
    .PxToRem(font-size,28);
    .index_di_left{
      float: left;
    }
    .index_di_right{
      float: right;
    }
  }
}
.index_infos{

  width:96%;
  padding: 2% 2%;
  .Flex;
  align-items:center;
  border-bottom:1px solid #cccccc;
  .index_infos_num{
    text-align: center;
    .PxToRem(width,78);
    .PxToRem(height,55);
  }
  dl{
     .PxToRem(margin-left,10);
      width:85%;
    .Flex;
    justify-content:space-around;
    dt{
      width:25%;
        img{
            .PxToRem(width,153);
            .PxToRem(height,103);
        }
      }
      .index_dd_left{
          width:32%;
          .PxToRem(font-size,30);
           .index_ji{
            .PxToRem(margin-top,30);
            color:#949494;
          }
      }
      .index_dd_right{
           p{
            .PxToRem(font-size,30);
            color:#949494;
            span{
              color:#e3c026;
            }
          }
          .index_rig_qie{
            padding-left:80%;
            .PxToRem(margin-top,15);
            color:#949494;
          }
      }
  }

}





</style>


